<style>
.no-select ::selection { background: transparent none repeat scroll 0 0; }
</style>
<script type="text/javascript">
    function run(){
       try{
         eval( document.getElementById('ta').value )
       }catch(er){
           alert("ERROR: "+er)
       }
    }
    function set(r,c,color){
	var el = document.getElementById('cell'+r+'x'+c);
	if( el ){
	        el.style.backgroundColor=color
	}
    }
    function onclick_handler(r,c){
	// example code:
	// "onclick = function (r,c){  set(r,c,'red') }"
      if( typeof onclick == 'function' ){
	var e =	window.event
	onclick(r,c)
      }
    }
    function onrclick_handler(r,c){
	// example code:
	// "onrclick = function (r,c){  set(r,c,'green') }"
      if( typeof onrclick == 'function' ){
	var e =	window.event
	onrclick(r,c)
	return false;
      }
    }
    function ondblclick_handler(r,c){
	// example code:
	// "ondblclick = function (r,c){  set(r,c,'blue') }"
      if( typeof ondblclick == 'function' ){
	var e =	window.event
	ondblclick(r,c)
      }
    }
    function onmouseover_handler(r,c){
	// example code:
	// "onmouseover = function (r,c){  set(r,c,'red') }"
      if( typeof onmouseover == 'function' ){
	onmouseover(r,c)
      }
    }
    function onmouseout_handler(r,c){
	// example code:
	// "onmouseout = function (r,c){  set(r,c,'red') }"
      if( typeof onmouseout == 'function' ){
	onmouseout(r,c)
      }
    }



    document.writeln("<table border='1' cellpadding='0' cellspacing='0' style='float: left;' >")
    for(r=0; r<=20; r++ ){
        document.writeln("<tr class='no-select'>")
        for(c=0; c<=20; c++ ){
            if( r==0 ){
                document.writeln("<td align='center'>"+c)
            } else if( c==0 ){
                document.writeln("<td align='center'>"+r)
            }else{
                document.writeln("<td class='no-select'><div style='width:20px; height:20px' id='cell"+r+"x"+c+"'"
		+" class='no-select' "
		+" onclick='return onclick_handler("+r+","+c+")' "
		+" ondblclick='return ondblclick_handler("+r+","+c+")' "
		+" oncontextmenu='return onrclick_handler("+r+","+c+")' "
		+" onmouseover='return onmouseover_handler("+r+","+c+")' "
		+" onmouseout='return onmouseout_handler("+r+","+c+")' "
		+">&nbsp;</div></td>")
            }
        }
        document.writeln("</tr >")
    }
    document.writeln("</table>")
    
</script>
<textarea rows="10" cols="30" id=ta style="font-size: 20pt; margin: 10px"></textarea>
<button onclick="run()">Run</button>
<br/>
<span style="font-weight: bold; margin: 20px">set(3,5,'green')</span>


